<!doctype html>
<html>
  <head>
    <title>polymer-selector-basic</title>
    <script src="../../../polymer/polymer.js"></script>
    <script src="../../../polymer/tools/test/htmltest.js"></script>
    <script src="../../node_modules/chai/chai.js"></script>
    <link rel="import" href="../../polymer-selector/polymer-selector.html">
  </head>
  <body>

    <polymer-selector id="selector1">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
      <div>Item 5</div>
    </polymer-selector>
    
    <polymer-selector id="selector2" selected="item3" selectedClass="my-selected" valueattr="id">
      <div id="item1">Item 1</div>
      <div id="item2">Item 2</div>
      <div id="item3">Item 3</div>
      <div id="item4">Item 4</div>
      <div id="item5">Item 5</div>
    </polymer-selector>
    
    <script>
      var assert = chai.assert;
      document.addEventListener('WebComponentsReady', function() {
        // selector1
        var s = document.querySelector('#selector1');
        assert.equal(s.selected, null);
        assert.equal(s.selectedClass, 'polymer-selected');
        assert.isFalse(s.multi);
        assert.equal(s.valueattr, 'name');
        assert.equal(s.items.length, 5);
        // selector2
        s = document.querySelector('#selector2');
        assert.equal(s.selected, "item3");
        assert.equal(s.selectedClass, 'my-selected');
        done();
      });
    </script>
  </body>
</html>
